import { useEffect, useState } from "react";
import { Button, Input } from "antd";
// 异步,不阻塞dom渲染，可以在副作用函数获取dom
/**
 * 1. 可以在副作用函数获取dom,接口请求等
 * 2. 浏览器完成布局和绘制之后执行副作用
 * 2.参数
    setup：Effect处理函数,可以返回一个清理函数。组件挂载时执行setup,依赖项更新时先执行cleanup再执行setup,组件卸载时执行cleanup。
    dependencies(可选)：setup中使用到的响应式值列表(props、state等)。
    必须以数组形式编写如[dep1, dep2]。
    空数组则只在第一次组件渲染执行一次
    不传则每次重渲染都执行Effect。

    3. 返回值：undefined
 */

export function UseEffectDemo() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  // 每次state值变化时，执行useEffect，其实是组件更新时执行，因为react的每次依赖变化都重新渲染组件
  useEffect(() => {
    console.log("执行-useEffect");

    return () => {
      console.log("执行-useEffect-清理函数");
    };
  });
  console.log("useEffect--渲染--同步先执行");
  //   执行依赖项，数组
  useEffect(() => {
    console.log("执行-useEffect-依赖项变化");
    const dom = document.getElementById("effectId");
    dom!.style.color = generateRandomColor();
  }, [count]);

  //   只执行一次,穿空数组
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((res) => res.json())
      .then((res) => setText(res.title));
    console.log("首次渲染执行");
  }, []);

  // 实例，定时器清理
  useEffect(() => {
    const timer = setTimeout(() => {
      console.log("定时器执行");
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, [text]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h3>useEffect学习</h3>
      <Button onClick={handleClick}>点击+1</Button>
      <div id="effectId">学习永无止境</div>
      <div>{text}</div>
      <Input
        placeholder="请输入"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
}

function generateRandomColor() {
  // 生成随机的 RGB 值
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);

  // 返回 RGB 颜色代码
  return `#${r.toString(16).padStart(2, "0")}${g
    .toString(16)
    .padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
}
